import { defineConfig,loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import federation from "@originjs/vite-plugin-federation"
import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js'; // 用于处理由 JS 注入的 CSS

// 依据当前模式加载对应的环境变量

// https://vite.dev/config/
// 子应用
export default defineConfig(({mode}) => {
  const env = loadEnv(mode, process.cwd());
  console.log("子应用调取host当前环境",env.VITE_REMOTE_HOST);
  
 return {
    server: {
      // 配置开发环境
      port: 5001,
      host: '0.0.0.0',
      // proxy: {
      //   '/dist': {
      //       target: env.VITE_REMOTE_HOST,
      //       changeOrigin: true,
      //         rewrite: (path) => path
      //     }
      // }
    },
    plugins: [
      vue(),
      federation({
        name: "web1MicroFrontend", // 是该微前端模块的名称
        filename: "web1MicroFrontendEntry.js", // 是生成的模块联邦入口文件的名称。
        remotes: {
          // microFrontendHost: `http://localhost:5000/dist/assets/hostMicroFrontendEntry.js`
          microFrontendHost: `${env.VITE_REMOTE_HOST}${env.VITE_REMOTE_HOST_ENV === 'development' ? '/dist' : '' }/assets/hostMicroFrontendEntry.js`
        },
        exposes: { // 用于定义要暴露给其他模块的模块。
          "./App": "./src/App.vue"
        },
        shared: ["vue"] // 表示共享的依赖，这里我们共享 Vue 以避免重复加载。
      }),
      cssInjectedByJsPlugin({
        // 自定义过滤函数，指定要注入 CSS 代码的文件
        jsAssetsFilterFunction: (asset) => {
          if ('fileName' in asset) {
            // 使用正则表达式匹配文件名
            return /web1MicroFrontendEntry\.js$/.test(asset.fileName);
          }
          return false;
        }
      })
    ],
    build: {
      target: "esnext",
      minify: false,
      outDir: "dist",
      assetsDir: "assets",
      cssCodeSplit: false,
      // rollupOptions: {
      //   output: {
      //     // 确保CSS文件名与你的需求一致
      //     assetFileNames: 'assets/[name].[hash].[ext]'
      //   }
      // }
    }
  }
})
